﻿@using Combres.Mvc
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_BlankLayout.cshtml";
}

@section PageTitle{
    Control Panel
}

@section AddToHead{
    @Url.CombresLink("siteCss")
    @Url.CombresLink("siteJs")
}
<header id="header" class="navbar clearfix navbar-fixed-top">
    <div class="container full-width">
        <div class="navbar-brand">
            <!-- COMPANY LOGO -->
            <a href="@Url.Action("Index","ControlPanel")">
                Human Resource Panel
            </a>
            <!-- /COMPANY LOGO -->
            <!-- TEAM STATUS FOR MOBILE -->
            <div class="visible-xs">
                <a class="team-status-toggle switcher btn dropdown-toggle" href="#">
                    <i class="fa fa-users"></i>
                </a>
            </div>
            <!-- /TEAM STATUS FOR MOBILE -->
            <!-- SIDEBAR COLLAPSE -->
            <div class="sidebar-collapse btn" id="sidebar-collapse">
                <i class="glyphicon glyphicon-align-justify"></i>
            </div>
            <!-- /SIDEBAR COLLAPSE -->
        </div>
        <!-- NAVBAR LEFT -->
        <ul id="navbar-left" class="nav navbar-nav pull-left hidden-xs">
            <li class="dropdown">
                <a data-toggle="dropdown tooltip" class="dropdown-toggle tip-bottom" href="#" title="Choose one skin">
                    Skins
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li class="dropdown-title">
                        <span><i class="fa fa-leaf"></i>Theme Skins</span>
                    </li>
                    <li><a data-skin="default" href="#">Subtle (default)</a></li>
                    <li><a data-skin="night" href="#">Night</a></li>
                    <li><a data-skin="earth" href="#">Earth</a></li>
                    <li><a data-skin="utopia" href="#">Utopia</a></li>
                    <li><a data-skin="nature" href="#">Nature</a></li>
                    <li><a data-skin="graphite" href="#">Graphite</a></li>
                </ul>
            </li>
        </ul>
        <!-- /NAVBAR LEFT -->
        <!-- BEGIN TOP NAVIGATION MENU -->
        <ul class="nav navbar-nav pull-right">
            <!-- BEGIN NOTIFICATION DROPDOWN -->
            <li id="header-notification" class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <i class="fa fa-bell"></i>
                    <span class="badge">7</span>

                </a>
                <ul class="dropdown-menu notification">
                    <li class="dropdown-title">
                        <span><i class="fa fa-bell"></i>7 Notifications</span>
                    </li>
                    <li>
                        <a href="#">
                            <span class="label label-success"><i class="fa fa-user"></i></span>
                            <span class="body">
                                <span class="message">5 users online. </span>
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>Just now</span>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="label label-primary"><i class="fa fa-comment"></i></span>
                            <span class="body">
                                <span class="message">Martin commented.</span>
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>19 mins</span>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="label label-warning"><i class="fa fa-lock"></i></span>
                            <span class="body">
                                <span class="message">DW1 server locked.</span>
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>32 mins</span>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="label label-info"><i class="fa fa-twitter"></i></span>
                            <span class="body">
                                <span class="message">Twitter connected.</span>
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>55 mins</span>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="label label-danger"><i class="fa fa-heart"></i></span>
                            <span class="body">
                                <span class="message">Jane liked. </span>
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>2 hrs</span>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="label label-warning"><i class="fa fa-exclamation-triangle"></i></span>
                            <span class="body">
                                <span class="message">Database overload.</span>
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>6 hrs</span>
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="footer">
                        <a href="#">See all notifications <i class="fa fa-arrow-circle-right"></i></a>
                    </li>
                </ul>
            </li>
            <!-- END NOTIFICATION DROPDOWN -->
            <!-- BEGIN INBOX DROPDOWN -->
            <li id="header-message" class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <i class="fa fa-envelope"></i>
                    <span class="badge">3</span>
                </a>
                <ul class="dropdown-menu inbox">
                    <li class="dropdown-title">
                        <span><i class="fa fa-envelope-o"></i>3 Messages</span>
                        <span title="" class="compose pull-right tip-right" data-original-title="Compose message"><i class="fa fa-pencil-square-o"></i></span>
                    </li>
                    <li>
                        <a href="#">
                            <img alt="" src="img/avatars/avatar2.jpg">
                            <span class="body">
                                <span class="from">Jane Doe</span>
                                <span class="message">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole ...
										</span>
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>Just Now</span>
                                </span>
                            </span>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img alt="" src="img/avatars/avatar1.jpg">
                            <span class="body">
                                <span class="from">Vince Pelt</span>
                                <span class="message">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole ...
										</span>
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>15 min ago</span>
                                </span>
                            </span>

                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img alt="" src="img/avatars/avatar8.jpg">
                            <span class="body">
                                <span class="from">Debby Doe</span>
                                <span class="message">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole ...
										</span>
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>2 hours ago</span>
                                </span>
                            </span>

                        </a>
                    </li>
                    <li class="footer">
                        <a href="#">See all messages <i class="fa fa-arrow-circle-right"></i></a>
                    </li>
                </ul>
            </li>
            <!-- END INBOX DROPDOWN -->
            <!-- BEGIN TODO DROPDOWN -->
            <li id="header-tasks" class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <i class="fa fa-tasks"></i>
                    <span class="badge">3</span>
                </a>
                <ul class="dropdown-menu tasks">
                    <li class="dropdown-title">
                        <span><i class="fa fa-check"></i>6 tasks in progress</span>
                    </li>
                    <li>
                        <a href="#">
                            <span class="header clearfix">
                                <span class="pull-left">Software Update</span>
                                <span class="pull-right">60%</span>
                            </span>
                            <div class="progress">
                                <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-success">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="header clearfix">
                                <span class="pull-left">Software Update</span>
                                <span class="pull-right">25%</span>
                            </span>
                            <div class="progress">
                                <div style="width: 25%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar" class="progress-bar progress-bar-info">
                                    <span class="sr-only">25% Complete</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="header clearfix">
                                <span class="pull-left">Software Update</span>
                                <span class="pull-right">40%</span>
                            </span>
                            <div class="progress progress-striped">
                                <div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">40% Complete</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="header clearfix">
                                <span class="pull-left">Software Update</span>
                                <span class="pull-right">70%</span>
                            </span>
                            <div class="progress progress-striped active">
                                <div style="width: 70%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">70% Complete</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="header clearfix">
                                <span class="pull-left">Software Update</span>
                                <span class="pull-right">65%</span>
                            </span>
                            <div class="progress">
                                <div style="width: 35%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 20%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 10%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="footer">
                        <a href="#">See all tasks <i class="fa fa-arrow-circle-right"></i></a>
                    </li>
                </ul>
            </li>
            <!-- END TODO DROPDOWN -->
            <!-- BEGIN USER LOGIN DROPDOWN -->
            <li id="header-user" class="dropdown user">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <img src="img/avatars/avatar3.jpg" alt="">
                    <span class="username">John Doe</span>
                    <i class="fa fa-angle-down"></i>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="fa fa-user"></i>My Profile</a></li>
                    <li><a href="#"><i class="fa fa-cog"></i>Account Settings</a></li>
                    <li><a href="#"><i class="fa fa-eye"></i>Privacy Settings</a></li>
                    <li><a href="login.html"><i class="fa fa-power-off"></i>Log Out</a></li>
                </ul>
            </li>
            <!-- END USER LOGIN DROPDOWN -->
        </ul>
        <!-- END TOP NAVIGATION MENU -->
    </div>

    <!-- TEAM STATUS -->
    <div id="team-status" class="container team-status" style="position: relative; margin-top: 0px; display: none;">
        <div id="scrollbar">
            <div class="handle">
            </div>
        </div>
        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: 100%; height: auto;">
            <div id="teamslider" style="overflow: hidden; width: 100%; height: auto;">
                <ul class="team-list" style="width: 2220px;">
                    <li class="current">
                        <a href="javascript:void(0);">
                            <span class="image">
                                <img alt="" src="img/avatars/avatar3.jpg">
                            </span>
                            <span class="title">You
				  </span>
                            <div class="progress">
                                <div style="width: 35%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 20%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 10%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">6</span> completed
						
                                    <span class="pull-right fa fa-check"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-orange">3</span> in-progress
						
                                    <span class="pull-right fa fa-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span> pending
						
                                    <span class="pull-right fa fa-list-ul"></span>
                                </div>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span class="image">
                                <img alt="" src="img/avatars/avatar1.jpg">
                            </span>
                            <span class="title">Max Doe
				  </span>
                            <div class="progress">
                                <div style="width: 15%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 40%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 20%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">2</span> completed
						
                                    <span class="pull-right fa fa-check"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-orange">8</span> in-progress
						
                                    <span class="pull-right fa fa-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">4</span> pending
						
                                    <span class="pull-right fa fa-list-ul"></span>
                                </div>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span class="image">
                                <img alt="" src="img/avatars/avatar2.jpg">
                            </span>
                            <span class="title">Jane Doe
				  </span>
                            <div class="progress">
                                <div style="width: 65%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 10%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 15%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">10</span> completed
						
                                    <span class="pull-right fa fa-check"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-orange">3</span> in-progress
						
                                    <span class="pull-right fa fa-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">4</span> pending
						
                                    <span class="pull-right fa fa-list-ul"></span>
                                </div>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span class="image">
                                <img alt="" src="img/avatars/avatar4.jpg">
                            </span>
                            <span class="title">Ellie Doe
				  </span>
                            <div class="progress">
                                <div style="width: 5%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 48%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 27%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">1</span> completed
						
                                    <span class="pull-right fa fa-check"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-orange">6</span> in-progress
						
                                    <span class="pull-right fa fa-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">2</span> pending
						
                                    <span class="pull-right fa fa-list-ul"></span>
                                </div>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span class="image">
                                <img alt="" src="img/avatars/avatar5.jpg">
                            </span>
                            <span class="title">Lisa Doe
				  </span>
                            <div class="progress">
                                <div style="width: 21%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 20%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 40%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">4</span> completed
						
                                    <span class="pull-right fa fa-check"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-orange">5</span> in-progress
						
                                    <span class="pull-right fa fa-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">9</span> pending
						
                                    <span class="pull-right fa fa-list-ul"></span>
                                </div>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span class="image">
                                <img alt="" src="img/avatars/avatar6.jpg">
                            </span>
                            <span class="title">Kelly Doe
				  </span>
                            <div class="progress">
                                <div style="width: 45%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 21%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 10%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">6</span> completed
						
                                    <span class="pull-right fa fa-check"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-orange">3</span> in-progress
						
                                    <span class="pull-right fa fa-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span> pending
						
                                    <span class="pull-right fa fa-list-ul"></span>
                                </div>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span class="image">
                                <img alt="" src="img/avatars/avatar7.jpg">
                            </span>
                            <span class="title">Jessy Doe
				  </span>
                            <div class="progress">
                                <div style="width: 7%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 30%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 10%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">1</span> completed
						
                                    <span class="pull-right fa fa-check"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-orange">6</span> in-progress
						
                                    <span class="pull-right fa fa-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">2</span> pending
						
                                    <span class="pull-right fa fa-list-ul"></span>
                                </div>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <span class="image">
                                <img alt="" src="img/avatars/avatar8.jpg">
                            </span>
                            <span class="title">Debby Doe
				  </span>
                            <div class="progress">
                                <div style="width: 70%" class="progress-bar progress-bar-success">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div style="width: 20%" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div style="width: 5%" class="progress-bar progress-bar-danger">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                            <span class="status">
                                <div class="field">
                                    <span class="badge badge-green">13</span> completed
						
                                    <span class="pull-right fa fa-check"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-orange">7</span> in-progress
						
                                    <span class="pull-right fa fa-adjust"></span>
                                </div>
                                <div class="field">
                                    <span class="badge badge-red">1</span> pending
						
                                    <span class="pull-right fa fa-list-ul"></span>
                                </div>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="slimScrollBar ui-draggable" style="background: none repeat scroll 0% 0% rgb(255, 255, 255); height: 5px; position: absolute; bottom: 1px; opacity: 0.5; display: block; border-radius: 5px; z-index: 99;"></div>
            <div class="slimScrollRail" style="width: 100%; height: 5px; position: absolute; bottom: 1px; display: none; border-radius: 5px; background: none repeat scroll 0% 0% rgb(51, 51, 51); opacity: 0.2; z-index: 90;"></div>
        </div>
    </div>
    <!-- /TEAM STATUS -->
</header>
<section class="content">
    @RenderBody()
</section>
